<!--
 * @Description: 资源需求上报
 * @Author: JiangMing
 * @Date: 2021-09-3 17:18:00
 * @LastEditors: JiangMing
 * @LastEditTime: 2021-09-3 17:18:00
-->
<template>
  <view class="page">
    <view class="resource-detail">
      <uni-forms ref="baseForm" :modelValue="formData" class="form">
        <uni-forms-item label="归属事件">
          <uni-easyinput
            v-model="formData.eventName"
            placeholder="请输入"
            :clearable="false"
            disabled
          />
        </uni-forms-item>
        <uni-forms-item label="保障点">
          <view class="select-input" @click="mapOpen">
            <uni-easyinput
              v-model="formData.address"
              placeholder="选择地点"
              :clearable="false"
              disabled
            />
            <image src="@/static/images/location.png" class="icon" />
          </view>
        </uni-forms-item>
        <uni-forms-item label="保障时间">
          <view class="select-input" @click="datePickerOpen">
            <uni-easyinput
              v-model="formData.time"
              placeholder="选择时间"
              :clearable="false"
              disabled
            />
            <image src="@/static/images/date.png" class="icon" />
          </view>
        </uni-forms-item>
        <view v-for="(item,index) in formData.resourceList" :key="index" class="resource-item">
          <uni-forms-item label="资源名称">
            <view class="select-input" @click="resourceOpen(item)">
              <uni-easyinput
                v-model="item.name"
                placeholder="选择资源"
                :clearable="false"
                suffixIcon="arrowdown"
                disabled
              />
            </view>
          </uni-forms-item>
          <uni-forms-item label="资源规格">
            <uni-easyinput v-model="item.size" placeholder="请输入资源规格" />
          </uni-forms-item>
          <uni-forms-item label="资源要求">
            <uni-easyinput v-model="item.remark" type="textarea" placeholder="可填写资源数量或调度要求" autoHeight />
          </uni-forms-item>
        </view>
      </uni-forms>
    </view>
    <view class="block-btn">
      <button class="btn-primary-plain" @click="resourceOpen()">添加需求资源</button>
    </view>
    <view class="page-footer">
      <button class="btn-primary-plain" @click="back">放弃上报</button>
      <button class="btn-primary" @click="back">确认上报</button>
    </view>
    <!-- 日期时间选择器 -->
    <DateTimePicker ref="datePicker" :value="formData.time" @submit="datePickerSubmit" />
  </view>
</template>

<script>
import DateTimePicker from '@/components/dateTimePicker';

export default {
  components: {
    DateTimePicker
  },
  data() {
    return {
      formData: {
        eventName: '0523 深圳市南山区XX村发生洪涝灾害',
        address: '深圳市南山区广安街13号应急物',
        time: '2021-08-02 12:00:00',
        resourceList: [
          { resourceId: 102, name: '灭火器', size: '10KG', remark: '' },
        ]
      }
    }
  },
  onLoad(options) {
    this.eventId = options.eventId;
  },
  mounted() {

  },
  methods: {
    datePickerOpen() {
      this.$refs.datePicker.open();
    },
    datePickerSubmit(data) {
      console.log(data)
      this.formData.time = `${data[0]}-${data[1]}-${data[2]} ${data[3]}:${data[4]}:${data[5]}`;
    },
    resourceOpen(row) {
      this.currentRes = row;
      let url = '/pages/resource/class';
      if (row) {
        url = `/pages/resource/index?type=${row.resourceType}&resourceId=${row.resourceId}`
      }
      uni.navigateTo({
        url,
        events: {
          resourceChange: this.resourceChange
        }
      })
    },
    resourceChange(data = []) {
      console.log('resourceChange', data)
      if (this.currentRes) {
        this.$set(this.currentRes, 'name', data[0].name);
        this.$set(this.currentRes, 'size', data[0].size);
        this.$set(this.currentRes, 'resourceId', data[0].resourceId);
      } else {
        this.formData.resourceList.push(...data);
      }
    },
    mapOpen() {
      const _this = this;
      // uni.chooseLocation({
      //   type: 'gcj02', //返回可以用于uni.openLocation的经纬度
      //   success: function (res) {
      //     const { latitude, longitude, address } = res;
      //     _this.formData.address = address;
      //     console.log(res)
      //   }
      // });
      uni.navigateTo({
        url: '/pages/mapLocation/index',
        events: {
          mapLocation: this.mapLocation
        }
      })
    },
    mapLocation(data) {
      console.log('mapLocation', data)
      this.formData.address = data.title;
    },
    back() {
      uni.navigateBack();
    }
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #F1F1F1;
}
.page {
  padding: 32rpx 0 200rpx;
  .page-footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;
    box-shadow: 0px -5px 10px rgba(44, 121, 247, 0.2);
    display: flex;
    justify-content: space-between;
    padding: 32rpx 10rpx;
    background-color: #fff;
    button {
      width: 50%;
      margin: 0 30rpx;
    }
  }
}
.resource-detail {
  padding: 0 32rpx;
  background-color: #FFF;
  .form {
    .select-input {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      .icon {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
  .resource-item {

  }
}
.block-btn {
  padding: 32rpx;
}
</style>